<div class="content-heading">
    <div>
        🔑 {{ 'general.roles' | translate }}
        <small><b> {{ 'roles.description' | translate }}</b></small>
    </div>
</div>

<app-loading *ngIf="model == null"></app-loading>

<div *ngIf="errors.length > 0">
    <alert type="danger">
        <div *ngFor="let error of errors; let i = index"><strong>{{i+1}}</strong> {{error}}</div>
    </alert>
</div>

<div class="container-fluid" *ngIf="model">
    <div class="col-xl-12 col-md-12 col-lg-12">
        <div class="card">

            <div class="card-body">
                <!--Input - text -->
                <fieldset>
                    <div class="form-group row">
                        <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'roles.edit.roleName-tooltip' | translate">{{
                            'roles.edit.roleName' | translate }} <i class="fa fa-comment-dots"></i></label>
                        <div class="col-xl-8">
                            <input class="form-control" autocomplete="model-roleName" [placeholder]="'roles.edit.roleName-tooltip' | translate"
                                [(ngModel)]="model.name" />
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="card-footer">
                <button class="mb-1 btn btn-primary" (click)="update()" type="button">Save</button>
                <a class="mb-1 btn btn-secondary" [routerLink]="['/roles']">Cancel</a>
            </div>
        </div>
    </div>
</div>

<div *ngIf="errors.length > 0">
    <alert type="danger">
        <div *ngFor="let error of errors; let i = index"><strong>{{i+1}}</strong> {{error}}</div>
    </alert>
</div>
<toaster-container [toasterconfig]="toasterconfig"></toaster-container>